<template>
	<view class="input flex">
		<!-- 微信数字键盘 -->
		<view v-if="type === 'digit'" class="value" @click="onFocus">
			<!-- ￥{{value?value:0}} -->
		</view>
		<!-- 密码键盘 -->
		<!-- <view v-if="type === 'password'" class="pwd-value flex" @click="onFocus">
			<template v-for="item in 6" :key="item">
				<view class="p-item flex">
					<uni-icons type="smallcircle-filled" size="14" color="#222"
						:style="{ opacity: value.length >= item ? '1' : '0' }"></uni-icons>
				</view>
			</template>
		</view> -->
		<!-- <uni-popup ref="popupRef" type="bottom" :is-mask-click="true" mask-background-color="rgba(0,0,0,0)"
		:safe-area="true"> -->
		<view class="keyboard">
			<!-- 数字 -->
			<view v-if="type === 'digit'" class="digit-mode" style="">
				<view class="money">
					<font style="font-size: 36rpx;">￥</font>{{value?value:0}}
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('1')">
					1
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('2')">
					2
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('3')">
					3
				</view>
				<view class="item zm iconbackspace" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('回退')">
					<uni-icons custom-prefix="iconfont" type="icon-backspace" size="20" color="#222"></uni-icons>
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('4')">
					4
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('5')">
					5
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('6')">
					6
				</view>
				<button :disabled="disabled" class="item confirm" hover-class="confirm-curr" hover-start-time="10"
					hover-stay-time="100" :style="{
					backgroundColor:value.charAt(value.length - 1) === '.' ? '#2BA245' : '',
					backgroundColor:disabled?'#2BA245':''}" @click="onKeyboard('付款')">
					{{disabled?"付款中":"付款"}}
				</button>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('7')">
					7
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('8')">
					8
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('9')">
					9
				</view>
				<view class="item zero" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('0')">
					0
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('.')">
					.
				</view>
			</view>
			<!-- 密码 -->
			<!-- <view v-if="type === 'password'" class="password-mode">
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('1')">
					1
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('2')">
					2
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('3')">
					3
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('4')">
					4
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('5')">
					5
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('6')">
					6
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('7')">
					7
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('8')">
					8
				</view>
				<view class="item" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('9')">
					9
				</view>
				<view class="item empty"> </view>
				<view class="item zero" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('0')">
					0
				</view>
				<view class="item empty" hover-class="current" hover-start-time="0" hover-stay-time="0"
					@click="onKeyboard('回退')">
					<uni-icons custom-prefix="iconfont" type="icon-backspace" size="20" color="#222"></uni-icons>
				</view>
			</view> -->
		</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";

	const props = defineProps({
		type: {
			type: String,
			required: false,
		},
		focus: {
			type: Boolean,
			required: false,
		},
		value: {
			type: String,
			required: false,
		},
		background: {
			type: String,
			required: false,
			default: "#ededed",
		},
		disabled: {
			type: Boolean,
			required: false,
			default: false,
		},
	});

	const emits = defineEmits([
		"update:value",
		"check",
		"confirm",
		"submit",
		"close",
	]);

	// const popupRef = ref(null);

	// const keyboardBottom = ref

	const onFocus = () => {
		// popupRef.value.open();
	};
	const onKeyboard = (key) => {
		console.log("props.value:", props.value);
		switch (key) {
			case "回退":
				emits("update:value", props.value.slice(0, -1));
				break;
			case "付款":
				console.log("付款")
				if (props.value >= 9999999) {
					wx.showToast({
						title: `支付金额非法`,
						icon: 'none',
						duration: 1500
					});
					break;
				}
				if (props.value.length == 0) {
					wx.showToast({
						title: `请输入金额`,
						icon: 'none',
						duration: 1500
					});
					break;
				}
				if (props.value == 0) {
					wx.showToast({
						title: `请输入正确金额`,
						icon: 'none',
						duration: 1500
					});
					break;
				}
				if (props.value.charAt(props.value.length - 1) !== ".") {
					emits("confirm");
					// popupRef.value.close();
				}
				break;
			case ".":
				if (props.value && !props.value.includes(".")) {
					emits("update:value", `${props.value}${key}`);
				}
				break;
			default:
				if (!props.value.includes(".") && props.value <= 9999999) {
					switch (props.type) {
						case "digit":
							emits("update:value", `${props.value}${key}`);
							break;
						case "password":
							emits(
								"update:value",
								props.value.length < 6 ? `${props.value}${key}` : props.value
							);
							if (props.value.length === 5) {
								emits("submit");
								emits("close");
								popupRef.value.close();
							}
							break;
						default:
							break;
					}
				} else if (props.value > 9999999) {
					wx.showToast({
						title: `请输入正确金额`,
						icon: 'none',
						duration: 1500
					});
					break;
				} else {
					const parts = props.value.split(".");
					if (parts[1].length < 2) emits("update:value", `${props.value}${key}`);
				}
				break;
		}
		if (props.type === "digit") emits("check");
	};

	onMounted(() => {
		if (props.focus) onFocus();
	});

	// defineExpose({
	// 	onFocus
	// });
</script>

<style lang="scss">
	@font-face {
		font-family: 'zm';
		/* project id 2442084 */
		src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
		src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
			url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
	}

	.zm {
		font-family: 'zm' !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.iconbackspace:before {
		content: '\ef11';
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.input {
		flex: 1;

		.value {
			flex: 1;
			font-size: 58rpx;
			line-height: 1;
			font-weight: 500;
			color: #ff5500;
		}

		.pwd-value {
			flex: 1;
			justify-content: center;
			align-items: center;

			.p-item {
				justify-content: center;
				align-items: center;
				margin-right: 12rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				background-color: v-bind(background);

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.keyboard {
		padding: 10rpx;
		padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #ececec;
		background-color: #f6f6f6;
		width: 730rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;

		.digit-mode {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(4, 1fr);
			gap: 12rpx;

			.money {
				position: absolute;
				left: 50rpx;
				top: -70rpx;
				flex: 1;
				font-size: 58rpx;
				line-height: 1;
				font-weight: 500;
				color: #ff5500;
			}

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 22rpx 0;
				font-size: 38rpx;
				color: #222;
				font-weight: 600;
				border-radius: 10rpx;
				background-color: #fff;

				&.zero {
					grid-column: span 2;
				}

				&.confirm {
					grid-row: span 3;
					height: auto;
					font-size: 34rpx;
					color: #fff;
					background-color: #1AAD19;
					width: 100%;

				}

				&.current {
					background-color: #d7d7d7;
				}

				&.confirm-curr {
					background-color: #2BA245 !important;
				}
			}
		}

		.password-mode {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(4, 1fr);
			gap: 18rpx;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 18rpx 0;
				font-size: 36rpx;
				color: #222;
				font-weight: 600;
				border-radius: 10rpx;
				background-color: #fff;

				&.empty {
					background-color: rgba(0, 0, 0, 0);
				}

				&.current {
					background-color: #d7d7d7;
				}
			}
		}
	}
</style>